<script setup name="informdetail">

import { ref, onMounted } from 'vue'
import OAMain from '@/components/OAMain.vue';
import '@wangeditor/editor/dist/css/style.css'
import { ElMessage } from 'element-plus';
import informHttp from '@/api/informHttp';
import { useRoute } from 'vue-router';
import timeFormat from '@/utils/timeFormat';

const route = useRoute()
const inform = ref({
    title: "",
    content: "",
    create_time: "",
    author: {
        realname: "",
        department: {
            name: ""
        }
    }
})

onMounted(async () => {
    const pk = route.params.pk
    try {    
        let res = await informHttp.getInformDetail(pk)
        console.log("resresres", res)
        inform.value = { ...inform.value, ...res }
    } catch (err) {
        console.error('完整错误对象:', err)
        console.log('响应数据:', err.response?.data)
        ElMessage.error(err.response?.data?.message || err.message)
    }
    await informHttp.readInform(pk)
})
</script>

<template>
    <OAMain title="通知详情">
        <el-card class="detail_card">
            <template #header>
                <h2 class="detail_title">{{ inform.title }}</h2>
                <div class="author_info">
                    <div>
                        <span>作者： {{ inform.author.realname }}</span>
                    </div>
                    <div>
                        <span>发布时间{{ timeFormat.stringFromDateTime(inform.create_time) }}</span>
                    </div>
                </div>
            </template>
            <template #default>
                <div v-html="inform.content">
                </div>
            </template>
            <template #footer>
                <div class="footer">
                    阅读量： {{ 10 }}
                </div>
            </template>
        </el-card>
    </OAMain>
</template>

<style scoped>
.detail_card{
    margin-top: 20px;
}
.detail_title{
    text-align: center;
}
.author_info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:20px;
}
.footer{
    text-align: right;
    margin-right: 100px;
}
</style>